<template>
    <div class="mainbox">
        <div class="top">
            <div class="top-right">检查项管理</div>
            <div class="imgTOPla"></div>
        </div>
        <div class="choice">
            <div class="choice-left-I" style="margin-left: 20px;">检查项分类：</div>
            <div class="choice-left">
                <el-select v-model="queryParams.classifyId" placeholder="输入检查项分类" class="Selection-boxs">
                    <el-option v-for="(item, index) in options.checkClassListOptions" :key="index" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="choice-left-I" style="margin-left: 10px;">检查项状态：</div>
            <div class="choice-left">
                <el-select v-model="queryParams.status" placeholder="请选择检查项状态" class="Selection-boxs">
                    <el-option
                        v-for="(item, index) in options.checkClassStatusOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="choice-left-I" style="margin-left: 10px;">检查项名称：</div>
            <div class="choice-left">
                <el-input v-model="queryParams.name" placeholder="请输入检查项名称" class="Selection-box Selection-boxs"></el-input>
            </div>
            <div class="choice-right">
                <el-button type="primary" class="choice-right-bottom" @click="getList()">查询</el-button>
                <el-button type="primary" class="choice-right-bottom choice-right-top-bottom" @click="reset()">重置</el-button>
            </div>
        </div>
        <div class="top">
            <div class="top-right">数据内容</div>
            <div class="imgTOPla"></div>
            <div class="choice-right-top data-div">
                <el-button
                    type="primary"
                    class="choice-right-top-bottom"
                    icon="el-icon-plus"
                    @click="add"
                    style="padding: 10px 18px !important;"
                    >新增检查项</el-button
                >
                <el-button
                    type="primary"
                    class="choice-right-top-bottom"
                    icon="el-icon-download"
                    @click="downloadTemplat"
                    style="padding: 10px 18px !important;"
                    >下载模板</el-button
                >
                <!-- <el-button type="primary" class="choice-right-top-bottom" icon="el-icon-plus" @click="leadingInClick"  style="padding: 10px 18px !important;">导入</el-button> -->
                <el-upload
                    v-loading="loading"
                    class="upload"
                    ref="upload"
                    drag
                    accept=".xlsx"
                    action=""
                    :limit="1"
                    :file-list="fileList"
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="handleUploadChange"
                >
                    <el-button class="btn-save font14" type="primary">上传职工信息表</el-button>
                </el-upload>
                <el-button type="primary" class="choice-right-top-bottom" @click="exportFile" style="padding: 9px 18px !important;">
                    <i class=" el-icon-downloadF" style="margin-right: 5px"></i>导出</el-button
                >
            </div>
        </div>
        <div class="table-box">
            <el-table
                v-if="totalCount > 0"
                @selection-change="handleSelectionChange"
                :data="tableData"
                style="width: 100%"
                height="100%"
                header-align="center"
                :header-cell-style="{ border: '0' }"
                :cell-style="{ height: '44px  !important /* no */' }"
            >
                <el-table-column type="selection" width="55" />
                <el-table-column label="序号" type="index" align="center" />
                <el-table-column :show-overflow-tooltip="true" prop="name" label="检查项名称" align="center"> </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="checkItemClassifyName" label="检查项分类" align="center">
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建时间" align="center"> </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="status" label="状态" align="center">
                    <template slot-scope="{ row }">
                        <div v-if="row.status == 1" style="color: #95F204;">可用</div>
                        <div v-if="row.status == 2" style="color: #CE225D;">禁用</div>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="id" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                            <el-button
                                @click="editRow(scope.row)"
                                type="text"
                                size="small"
                                class="button-edit"
                                style="padding: 0 !important;"
                            >
                            </el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                            <el-button style="padding: 0 !important; margin-top: 5px;"  @click="delRow(scope.row)" type="text" size="small" class="button-delete">
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <img class="noDatas" v-if="totalCount == 0" :src="noDATA" />
            <div class="div-pagination div-pagination-poly">
                <el-pagination
                    class="div-pagination-mas"
                    :background="true"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryParams.pageNum"
                    :page-size="queryParams.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount"
                    v-if="totalCount > 0"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog
            :title="titles"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            width="50%"
            :before-close="handleClose"
            class="dialog-doubleColumn"
        >
            <el-form ref="formDataRef" :model="formData" :rules="formRules" label-width="140px">
                <div class="list-top">
                    <div class="names">
                        <el-form-item label="检查项名称：" prop="name">
                            <el-input v-model="formData.name" placeholder="请输入检查项名称" />
                        </el-form-item>
                    </div>
                    <div class="names">
                        <el-form-item label="检查项分类：" prop="checkItemClassifyId">
                            <el-select
                                v-model="formData.checkItemClassifyId"
                                placeholder="请选择检查项分类"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="(item, index) in options.checkClassListOptions"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="dialog-d1">
                        <div class="dialog-d1-l">
                            <el-form-item label="关键词：" prop="keyword">
                                <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 10 }"
                                    v-model="formData.keyword"
                                    placeholder="防爆、开关、断电、断水、应急系统、可燃气体、阻火器、浓度、爆炸"
                                />
                            </el-form-item>
                            <span style="margin-left: 19%;color: #DDDDDD;">提示：关键词之间以"、“隔开</span>
                        </div>
                    </div>
                    <div class="dialog-d1">
                        <div class="dialog-d1-l">
                            <el-form-item label="状态：">
                                <!-- <el-radio style="margin-left: 100px;" v-model="formData.status" :label="1">可用</el-radio>
                                <el-radio v-model="formData.status" :label="2">禁用</el-radio> -->
                                <el-radio-group v-model="formData.status">
                                    <el-radio :label="1">可用</el-radio>
                                    <el-radio :label="2">禁用</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                    </div>

                    <div class="dialog-d1">
                        <div class="dialog-d1-l">
                            <el-row class="fltl-div">
                                <el-form-item label="违反法律条例：">
                                    <div class="tiaoli-div">
                                        <el-col :span="20" style="display: flex;background: #2C313B;padding: 10px 0;width: 100%;">
                                            <el-select @change="firstChange" v-model="formData.firstFloor" placeholder="选择法规">
                                                <el-option
                                                    v-for="(item, index) in options.treeFirst"
                                                    :key="index"
                                                    :label="item.label"
                                                    :value="item.value"
                                                >
                                                </el-option>
                                            </el-select>
                                            <el-select @change="secondChange" v-model="formData.secondFloor" placeholder="选择章">
                                                <el-option
                                                    v-for="(item, index) in options.treeSecond"
                                                    :key="index"
                                                    :label="item.label"
                                                    :value="item.value"
                                                >
                                                </el-option>
                                            </el-select>
                                            <el-select v-model="formData.lawChapterTemp" placeholder="选择条例(多选)" multiple>
                                                <el-option
                                                    v-for="(item, index) in options.treeThird"
                                                    :key="index"
                                                    :label="item.label"
                                                    :value="item.value"
                                                >
                                                </el-option>
                                            </el-select>
                                            <el-button v-if="formData.lawChapterTemp && formData.lawChapterTemp.length > 0" @click="addLaw" type="primary">+添加</el-button>
                                        </el-col>
                                        <el-col :span="20" style="background: #2C313B;padding: 10px;width: 100%;">
                                            <div class="dialog-tab-div" v-for="(item, index) in lawsList" :key="index">
                                                <div class="law-div-tit-left">{{ item.name }}</div>
                                                <div class="xian"></div>
                                                <div class="law-div-tit-rig">
                                                    <Tree
                                                        ref="tree"
                                                        :Treedata="item.imsLawRuleChapterVos"
                                                        children="imsLawRuleChapterSetVos"
                                                        Adddisplay
                                                        @nodeClick="handleNodeClick"
                                                        @nodeDelete="doorgroupDelete"
                                                        class="group-left-tree"
                                                    ></Tree>
                                                </div>
                                            </div>
                                        </el-col>
                                    </div>
                                </el-form-item>
                            </el-row>
                        </div>
                    </div>
                </div>
            </el-form>
            <div slot="footer">
                <el-button class="dialog-footer-resetBtn" @click="handleClose">取 消</el-button>
                <el-button class="dialog-footer-sureBtn" @click="submit">确定</el-button>
            </div>
            <!-- <div slot="footer" class="dialog-footer">
                <el-button type="primary" class="con_tit" @click="handleClose">取 消</el-button>
                <el-button type="primary" class="con_tit" @click="submit()">提 交</el-button>
            </div> -->
        </el-dialog>
    </div>
</template>

<script>
import bus from '../../components/common/bus';
import api from '../../api/Systemsettings/inspectionManagement';
import { validateSpecial } from '@/utils/validate';
import Tree from './common/tree.vue';
export default {
    components: { Tree },
    data() {
        return {
            loading: false,
            fileList: [],
            treeData: [],
            queryParams: {
                classifyId: '',
                name: '',
                status: '',
                pageNum: 1,
                pageSize: 10
            },
            noDATA: '',
            tableData: [],
            totalCount: 0,
            dialogVisible: false,
            options: {
                // 检查分类项
                checkClassListOptions: [],
                checkClassStatusOptions: [
                    {
                        label: '可用',
                        value: 1
                    },
                    {
                        label: '禁用',
                        value: 2
                    }
                ],
                // 树的三级
                treeFirst: [],
                treeSecond: [],
                treeThird: []
            },
            formData: {},
            formRules: {
                checkItemClassifyName: [
                    { required: true, message: '请输入检查项分类名称', trigger: 'blur' },
                    { validator: validateSpecial, trigger: 'blur' },
                    { max: 200, message: '长度不可超过200字符', trigger: ['change', 'blur'] }
                ],
                checkItemClassifyId: [{ required: true, message: '请选择检查项分类', trigger: 'blur' }],
                keyword: [{ required: true, message: '请输入关键词', trigger: 'blur' }],
                serialNumber: [{ required: true, message: '请输入序号', trigger: 'blur' }]
            },
            lawsList: {},
            titles: '',
            SelectionList: [],
            treeFirst1: []
        };
    },
    created() {
        this.handleClose()
        this.getList();
        this.nodata();
        bus.$on('collapseColor', () => {
            this.nodata();
        });
        api.checkClassification().then(res => {
            this.options.checkClassListOptions = res.data.map(item => ({
                ...item,
                label: item.name,
                value: item.id
            }));
        });
    },
    methods: {
        // 点击左侧树
        handleNodeClick(obj, node, self) {
            console.log('obj', obj, 'node', node, 'self', self);
            this.currentRow.id = obj.id;
            this.currentRow.parentId = obj.parentId;
            this.currentRow.parentName = obj.pName;
            this.currentRow.remark = obj.remark;
            this.editForm = true; // 可修改上下顺序
            this.currentCode1 = obj.id;
            this.currentCode = obj.groupCode;
            this.handleQuery();
        },
        // 删除节点操作
        doorgroupDelete(data) {
            const imsLawRuleChapterSetVos = data.imsLawRuleChapterSetVos
            if(imsLawRuleChapterSetVos) {
                const ids = imsLawRuleChapterSetVos.map(item => String(item.id))
                this.formData.lawChapterAll = this.formData.lawChapterAll.filter(item => !ids.includes(String(item)))
            } else {
                this.formData.lawChapterAll = this.formData.lawChapterAll.filter(item => item != data.id)
            }
            this.getImsLawRule()
        },
        nodata() {
            if (sessionStorage.getItem('sprite1') != null) {
                let url = sessionStorage.getItem('sprite1');
                this.noDATA = url;
            } else {
                this.noDATA =
                    '';
            }
        },
        // 查询
        getList() {
            api.list(this.queryParams).then(resq => {
                console.log(resq);
                this.tableData = resq.data.records;
                this.totalCount = resq.data.total;
            });
        },
        // 重置
        reset() {
            this.queryParams = {
                classifyId: '',
                name: '',
                status: '',
                pageNum: 1,
                pageSize: 10
            };
            this.getList();
        },
        //编辑弹框
        deleteRow() {
            this.form = {};
            this.titles = '编辑';
            this.dialogVisible = true;
        },
        // 新增检查项
        add() {
            this.titles = '新增检查项';
            this.dialogVisible = true;
            this.formData={
                status:1
            }
            this.getOrgTree();
        },
        // 编辑检查项
        editRow(row) {
            console.log('row', row)
            this.titles = '编辑检查项';
            this.dialogVisible = true;
            this.formData = row
            this.formData.lawChapterAll = JSON.parse(JSON.stringify(row.lawsRegulationCode.split(',')))
            this.getImsLawRule()
            this.getOrgTree();
        },
        // 查 第二级
        firstChange(v) {
            this.options.treeSecond = [];
            this.options.treeThird = [];
            this.formData.secondFloor = undefined;
            this.formData.lawChapterTemp = undefined;
            this.options.treeFirst.filter(item => {
                if (item.id == v) {
                    this.options.treeSecond = item.imsLawRuleChapterVos.map(item => ({
                        label: item.name,
                        value: item.id
                    }));
                    console.log('this.options.treeSecond', this.options.treeSecond);
                }
            });
        },
        // 查 第三级
        secondChange(v) {
            this.options.treeThird = [];
            this.formData.lawChapterTemp = undefined;
            api.getLawsRegulations({ chapterId: v }).then(res => {
                console.log('resres', res);
                const data = res.data.data
                if(data && data.length > 0){
                    const ruleList  = data[0].imsLawRuleChapterVos
                    if(ruleList && ruleList.length > 0){
                        this.options.treeThird = ruleList[0].imsLawRuleChapterSetVos.map(item => ({
                            label: item.name,
                            value: item.id
                        }));
                    }
                }
            });
        },
        // 获取组织(树形结构)
        getOrgTree() {
            return new Promise(resolve => {
                api.getLawsRegulations().then(res => {
                    if (res.data.data) {
                        this.treeFirst1 = res.data.data;
                        this.options.treeFirst = res.data.data.map(item => ({
                            ...item,
                            label: item.name,
                            value: item.id
                        }));
                        // this.options.treeSecond = res.data.data.imsLawRuleChapterVos.map((item) => ({
                        //     ...item,
                        //     label: item.name,
                        //     value: item.id
                        // }));
                        // this.options.treeSecond = res.data.data.imsLawRuleChapterVos.imsLawRuleChapterSetVos.map((item) => ({
                        //     ...item,
                        //     label: item.name,
                        //     value: item.id
                        // }));
                        // if(res.data.data.imsLawRuleChapterVos){
                        //     this.options.treeSecond = res.data.data.imsLawRuleChapterVos.name
                        // }if(res.data.data.imsLawRuleChapterVos.imsLawRuleChapterSetVos){
                        //     this.options.treeSecond = res.data.data.imsLawRuleChapterVos.imsLawRuleChapterSetVos.name
                        // }
                    }
                    // this.lawsList = res.data.data;
                    console.log('lawsList', this.lawsList);
                    resolve(res.data.data);
                });
            });
        },
        addLaw() {
            console.log('this.formData.lawChapterTemp',this.formData.lawChapterTemp)
            
            console.log('this.formData.lawChapterAll',this.formData.lawChapterAll)
            this.formData.lawChapterAll.push(...this.formData.lawChapterTemp)
            console.log('this.formData.lawChapterAll',this.formData.lawChapterAll)
            
            this.getImsLawRule()
            this.formData.lawChapterTemp = undefined;
        },
        getImsLawRule() {
            this.formData.lawChapterAll = [...new Set(this.formData.lawChapterAll)]
            if(this.formData.lawChapterAll && this.formData.lawChapterAll.length > 0){
                api.getImsLawRule({lawRuleChapterSetIds: this.formData.lawChapterAll.join()}).then(res => {
                    this.lawsList = res.data;
                })
            } else {
                this.lawsList = [];
            }
            
        },
        handleClose() {
            this.dialogVisible = false;
            this.formData = {
                lawChapterTemp: undefined,
                lawChapterAll: [],
            };
            this.lawsList = []
        },
        // 保存
        submit(){
            this.$refs.formDataRef.validate((valid) => {
                if (!valid) return false;
                if (this.formData.id != null) {
                    api.update({
                        ...this.formData,
                        // lawChapterNumber:this.formData.lawChapterAll.join(),
                        lawsRegulationCode:this.formData.lawChapterAll.join()
                    }).then((response) => {
                        console.log(response);
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                        this.handleClose();
                        this.getList();
                    });
                } else {
                    api.add({
                        ...this.formData,
                        // lawChapterNumber:this.formData.lawChapterAll.join(),
                        lawsRegulationCode:this.formData.lawChapterAll.join()
                    }).then((response) => {
                        console.log(response);
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                        this.handleClose();
                        this.getList();
                    });
                }
            });
        },
        // 下载模板
        downloadTemplat() {
            this.$confirm('确定下载模板?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({
                    lock: true,
                    text: '下载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                api.downTemplate().then(res => {
                    console.log('re下载模板sres',res)
                    api.download({ fileName: res.msg }).then((resq) => {
                        // loading.close();
                        console.log('resq=====',resq)
                        const blob = new Blob([resq], {
                            type: resq.type
                        });
                        const fileName = Date.parse(new Date()) + '.xlsx';
                        loading.close();
                        if (window.navigator.msSaveOrOpenBlob) {
                            navigator.msSaveBlob(blob, fileName);
                        } else {
                            const link = document.createElement('a');
                            link.href = window.URL.createObjectURL(blob);
                            link.download = fileName;
                            link.click(); // 释放内存
                            window.URL.revokeObjectURL(link.href);
                        }
                    });
                })
            });
        },
        leadingInClick() {},
        // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被用
        handleUploadChange(file, fileList) {
            console.log('filefile', file);

            if (file.raw.type.indexOf('application/vnd') !== -1) {
                const formData = new FormData();
                formData.append('file', file.raw);
                this.uploadExcel(formData);
            } else {
                this.$message.info('您上传的文件格式不符合要求!只支持xlsx格式的文件');
            }
        },
        // excel文件上传-导入
        uploadExcel(params) {
            this.loading = true;
            api.leadingIn(params)
                .then(res => {
                    console.log('res', res);
                    this.loading = false;
                    this.$message.success('导入成功！');
                    this.$refs.upload.clearFiles();
                })
                .catch(error => {
                    // 错误后需要重置上传状态
                    this.$refs.upload.clearFiles();
                    this.loading = false;
                    console.log('uploadExcel error', error);
                    if (error) {
                        this.$message.error(error.message || '操作失败！');
                    }
                });
        },
        // 表格 多选
        handleSelectionChange(rowList) {
            this.SelectionList = [];
            this.SelectionList = rowList.map(v => {
                return v.id;
            });
        },
        //导出
        exportFile() {
            if (this.SelectionList.length > 0) {
                let nullArr = [];
                this.SelectionList.forEach(v => {
                    nullArr.push(v);
                });
                this.$confirm('是否导出?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: '下载中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    api.leadingOut({ids:this.SelectionList})
                        .then(res => {
                            console.log('==================',res)
                            api.download({ fileName: res.msg }).then((resq) => {
                            // loading.close();
                            const blob = new Blob([resq], {
                                type: resq.type
                            });
                            const fileName = Date.parse(new Date()) + '.xlsx';
                            loading.close();
                            if (window.navigator.msSaveOrOpenBlob) {
                                navigator.msSaveBlob(blob, fileName);
                            } else {
                                const link = document.createElement('a');
                                link.href = window.URL.createObjectURL(blob);
                                link.download = fileName;
                                link.click(); // 释放内存
                                window.URL.revokeObjectURL(link.href);
                            }
                        });
                        })
                        .catch(() => {
                            loading.close();
                        });
                });
            } else {
                this.$message.error('请勾选要导出的数据');
            }
        },
        // 删除操作
        delRow(row) {
            this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                api.delete(row.id).then(() => {
                    this.getList();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                });
            });
        },
        handleSizeChange(val) {
            this.queryParams.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.queryParams.pageNum = val;
            this.getList();
        }
    }
};
</script>

<style lang="scss" scoped>
@import '../../assets/css/commonStyle/table.scss';
@import '../../assets/css/commonStyle/elementUI.scss';
@import '../../assets/css/style/TransmissionTube.scss';
.mainbox {
    width: 100%;
    height: 100%;
}
.choice {
    width: calc(100% - 10px);
    min-height: 60px;
    max-height: 120px;
    height: auto !important;
    overflow: hidden;
    opacity: 1;
    border-radius: 2px;
    margin: 0 0px 20px 0;
}
.choice-left {
    width: 170px;
    height: 32px;
    opacity: 1;
    margin: 14px 3px;
    float: left;
}
.table-box {
    width: calc(100% - 10px);
    box-sizing: border-box;
    height: 670px;
    padding: 0px 20px 0 20px;
    position: relative;
}
.table-box {
    height: calc(100% - 170px);
}
.top {
    padding-top: 10px;
    height: 29px;
    margin: 0px 0 20px 0;
    position: relative;
}
.Selection-dialog {
    float: right;
    margin-right: 20%;
}
.div-el-input {
    width: 55%;
}
.dialog-div-check {
    overflow: hidden;
}
.dialog-dxN {
    float: left;
    margin-right: 20px;
}
/deep/ .el-input-group__append {
    background-color: var(--eleTheme-color);
    border: 1px solid var(--eleTheme-color);
    border-left: 1px solid var(--eledialog-color);
    color: var(--shallowFont-color);
}
.div-el-upload {
    margin-left: 10px;
}
/deep/.el-textarea__inner {
    background: var(--eleTheme-color) !important;
}
.tiaoli-div {
    /deep/ .el-input__inner {
        background: #171a1f !important;
    }
    .dialog-tab-div {
        background: #171a1f;
        display: flex;
        border: 2px solid #2c313b;
        .law-div-tit-left {
            // border-right: 1px solid;
            width: 27%;
            padding: 10px;
            text-align: center;
            align-items: center;
            display: flex;
        }
        .xian {
            border: 2px solid #2c313b;
        }
        .law-div-tit-rig {
            padding: 10px;
            width: 70%;
            /deep/ .el-tree {
                background: transparent !important;
            }
            /deep/ .el-tree-node__content:hover {
                background: #2c313b !important;
            }
        }
    }
}
.data-div {
    display: flex;
    /deep/ .upload {
        box-sizing: border-box;
        height: 34px;
        margin: 0 10px;
        .el-upload--text {
            width: unset;
            height: unset;
            border: none;
            border-radius: unset;
            .el-upload-dragger {
                width: unset;
                height: unset;
                border: none;
                border-radius: unset;
                .el-button {
                    // background: #3668f7;
                    background: #ffffff;
                    border-color: #cccccc;
                    span {
                        color: #666666;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
</style>
